<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body style="background-color: rgb(57,61,73)">
<!--条件显示图表-->
<form class="layui-form"
      style="position:absolute;left:10%;">
    <label class="layui-form-label" style="font-size: 18px;font-weight: bold;color: white;">日期区间</label>
    <div class="layui-input-inline">
        <input type="text" name="startTime" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off"
               class="layui-input">
    </div>
    <span style="font-size: 18px;font-weight: bold;color:red;">—</span>
    <div class="layui-input-inline">
        <input type="text" name="endTime" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off"
               class="layui-input">
    </div>
    <button class="layui-btn" lay-submit lay-filter="selectConditionFilter" data-type="reload">搜索</button>
    <button type="reset" class="layui-btn layui-btn-normal" id="myButton">重置</button>
</form>
<!--图表显示-->
<div id="main" style="left:40px;height:500px;width: 1000px;top:40px"></div>
</body>
<script src="/layui/layui.js"></script>
<script src="/echarts/echarts.js"></script>
<script src="/echarts/chalk.js"></script>
<script>
    layui.use(['jquery', 'table', 'carousel', 'laydate', 'form'],function () {
        let $ = layui.jquery;
        let form = layui.form;
        let laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //表单提交
        form.on('submit(selectConditionFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let str = "?startTime=" + data.field.startTime + "?endTime=" + data.field.endTime
            //调用考勤图方法
            showChart(str)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //设置重置按钮
        $("#myButton").click(function () {
            showChart("");
        })

        //调用考勤图方法
        showChart("");

        function showChart(str){
            $.ajax({
                url: "/attendance/showAttendanceEchart" + str,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    if (data.code == 0) {
                        //获取横坐标
                        let loginNameX = data.data.loginNameX;
                        // 获取y坐标1
                        let inStatusY = data.data.inStatusY;
                        // 获取y坐标2
                        let outStatusY = data.data.outStatusY;
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        let option = {
                            title: {
                                text: '考勤统计',
                                textStyle: {
                                    fontSize: 18,//字体大小
                                    color: '#ffffff'//字体颜色
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['迟到次数', '早退次数'],
                                textStyle:{
                                    fontSize: 18,//字体大小
                                    color: '#ffffff'//字体颜色
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                triggerEvent: true,
                                boundaryGap: false,
                                data: loginNameX,
                                axisLabel:{interval:0}
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '迟到次数',
                                    type: 'line',
                                    stack: '次数',
                                    data: inStatusY
                                },
                                {
                                    name: '早退次数',
                                    type: 'line',
                                    stack: '次数',
                                    data: outStatusY
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                }
            });
        }
    })
</script>
</html>